<template>
  <view class="box" :style="{ top: `calc(${carTabTop} - 18px)` }" v-if="SHOW_TOP">
    {{ carTabTop }}
    <view class="arrow" :style="{ marginRight: marRight + 'rpx' }"></view>
    <view class="body">
      <view class="textContent">{{ text }}</view>
      <!-- <view class="split-line"></view> -->
      <view class="cancle_btn" @click="okHandler">
        <uni-icons color="#fafafa" type="closeempty" size="24rpx"></uni-icons>
        <!-- <image src="./assets/cancle.svg" /> -->
      </view>
    </view>
  </view>
</template>

<script>
const STORAGE_KEY_ONE = "ADD-MYAPP-KEY-ONE";
export default {
  name: "AddTips",
  props: {
    carTabTop: String
  },
  data() {
    return {
      SHOW_TOP: false,
      SHOW_TOP_key: 1,
      marRight: 120,
      text: "添加到我的小程序，微信首頁下拉訪問更便捷。",
    };
  },
  mounted() {
    this.initTips();
    setTimeout(() => {
      this.SHOW_TOP = false;
    }, 5000);
  },
  methods: {
    initTips() {
      // 判断是否已经显示过
      let cacheOne = wx.getStorageSync(STORAGE_KEY_ONE);
      const now = +new Date();
      // 校验缓存数据 以及缓存时间是否过期(关闭后缓存一个月 一个月后重新提示用户)
      if (cacheOne && now - cacheOne < 30 * 24 * 3600000) return;
      // 处理根据系统信息处理位移箭头位置（重点）
      let systemInfo = wx.getSystemInfoSync();
      let client = wx.getMenuButtonBoundingClientRect();
      if (systemInfo && client) {
        this.marRight = systemInfo.screenWidth - client.left + 20;
      }
      // 没显示过，则进行展示
      this.SHOW_TOP = true;
    },
    // 显示全屏添加说明
    showModal() {
      this.SHOW_TOP = false;
      this.SHOW_MODAL = true;
    },
    okHandler: function () {
      const storage_key = this.SHOW_TOP_key;
      let key = STORAGE_KEY_ONE;
      this.SHOW_TOP = false;
      wx.setStorage({
        key,
        data: +new Date(),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  position: fixed;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  width: 650rpx;
  z-index: 9999;

  .arrow {
    width: 0;
    height: 0;
    margin-right: 120rpx;
    border-width: 10rpx;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
  }

  .body {
    background-color: rgba(0, 0, 0, 0.7);
    /* box-shadow: 0 10rpx 20rpx -10rpx #34b5e2; */
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70rpx;
    padding: 0 18rpx 0 18rpx;
    margin-right: 25rpx;

    .textContent {
      color: #fff;
      font-size: 24rpx;
      font-weight: 400;
      text-align: center;
      margin-right: 20rpx;
      /* padding: 0 10rpx; */
    }
  }
}

.split-line:after {
  content: "";
  position: absolute;
  top: 34rpx;
  /* right: 0; */
  width: 2rpx;
  height: 40rpx;
  background: #a6a6a6;
}

.cancle_btn {
  /* padding: 0 24rpx 0 10rpx; */
  display: flex;
  justify-content: center;
}
</style>
